<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue中的作用域插槽</title>
	</head>
	<body>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<div id="root">
			<child>

				<!-- 当子组件做循环或者某一部分需要由外部传递来的时候需要使用作用域插槽 -->
				<template slot-scope="props">

					<h1>{{props.item}}--hello</h1>					
				</template>
			</child>
		</div>
	<script type="text/javascript">
		Vue.component('child',{
			data:function(){
				return{
					list:[1,2,3,4]
				}
			},
			template:`<div>
						<ul>
							<slot v-for="item in list" :item=item></li>
							</slot>
							
							</ul>
					</div>`
		})
		var app=new Vue({
			el:'#root'
		})
	</script>
	</body>
</html>
